
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="content-type" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>学生信息</title>

    <link href="../css/bootstrap.css" rel="stylesheet"/>
    <link href="../css/font-awesome.css" rel="stylesheet"/>
    <link href="../css/custom-styles.css" rel="stylesheet"/>
    <link href="../css/element/index.css" rel="stylesheet"/>

    <style>
        [v-cloak] {
            display: none;
        }
        .table th, .table td {
            text-align: center !important;
            vertical-align: middle !important;
        }
    </style>
</head>
<body>
<div id="wrapper" v-cloak>
    <div class="row">
        <div class="col-md-12" style="height:60px;">
            <nav class="navbar navbar-default top-navbar" role="navigation">
                <div class="row">
                    <div class="col-md-2">
                        <a class="navbar-brand" style="width:100%; background-color: darkslateblue"><strong style="font-size: 20px;">学生选课管理系统</strong></a>
                    </div>
                    <div class="col-md-10">

                        <ul class="nav navbar-top-links navbar-right">
                            <li style="color: white">欢迎您，{{ user.name }}</li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li><a href="javascript:void(0)" @click="personalPage"><i class="fa fa-user fa-fw"></i> 个人信息</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a href="javascript:void(0)" @click="logout"><i class="fa fa-sign-out fa-fw"></i> 退出</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <nav id="nav-id" class="navbar-default navbar-side" role="navigation">
                <div class="sidebar-collapse">
                    <ul class="nav" id="main-menu">

                        <li>
                            <a href="#"><i class="fa fa-sitemap"></i> 信息管理<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level collapse in">
								<li v-if="user.level === 1">
									<a href="adminInfo.html"><i class="fa fa-table sub-icon-mg" aria-hidden="true"></i><span class="mini-sub-pro">管理员信息</span></a>
								</li>
								<li v-if="user.level===1">
									<a href="teacherInfo.html"><i class="fa fa-table sub-icon-mg" aria-hidden="true"></i><span class="mini-sub-pro">教师信息</span></a>
								</li>
								<li v-if="user.level === 1">
									<a href="studentInfo.html" class="active-menu"><i class="fa fa-table sub-icon-mg" aria-hidden="true"></i><span class="mini-sub-pro">学生信息</span></a>
								</li>
								<li v-if="user.level === 1">
									<a href="xueyuanInfo.html"><i class="fa fa-table sub-icon-mg" aria-hidden="true"></i><span class="mini-sub-pro">学院信息</span></a>
								</li>
								<li v-if="user.level===1">
									<a href="zhuanyeInfo.html"><i class="fa fa-table sub-icon-mg" aria-hidden="true"></i><span class="mini-sub-pro">专业信息</span></a>
								</li>
								<li>
									<a href="classInfo.html"><i class="fa fa-table sub-icon-mg" aria-hidden="true"></i><span class="mini-sub-pro">课程信息</span></a>
								</li>

								<li>
									<a href="xuankeInfo.html"><i class="fa fa-table sub-icon-mg" aria-hidden="true"></i><span class="mini-sub-pro">选课信息</span></a>
								</li>


                                <li>
                                    <a href="javascript:void(0)" @click="personalPage"><i class="fa fa-user"></i>个人信息</a>
                                </li>

                            </ul>
                        </li>

                        <li v-if="user.level===1">
                            <a href="updatePassword.html"><i class="fa fa-unlock-alt"></i>修改密码</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" @click="logout"><i class="fa fa-power-off"></i>退出登录</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="col-md-10" style="background-color: #e6e6e6">
            <div id="page-wrapper">
                <div id="page-inner">
                    <div class="row">
                        <div class="col-md-12">
                            <h1 class="page-header">
                                <small>学生信息</small>
                            </h1>
                        </div>
                    </div>


                    <div class="row">
                        <div class="panel panel-default" style="background-color: whitesmoke">

                            <div class="panel-body">
                                <div class="table-responsive">
                                    <div class="nx-table-header">
                                        <button v-if="user.level===1" class="btn btn-sm btn-primary" @click="add()">新增</button>
                                        <input type="text" placeholder="请输入搜索内容">
                                        <i class="glyphicon glyphicon-search"></i>
                                    </div>
                                    <table class="table table-striped table-bordered table-hover">
                                        <thead>
                                        <tr>

                                            <th>姓名</th>
                                            <th>性别</th>
                                            <th>年龄</th>
                                            <th>学分</th>
                                            <th>学号</th>
                                            <th>所属学院</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody v-for="obj in tableData">
                                        <tr>
                                            <td>{{ obj.name }}</td>
                                            <td>{{ obj.sex }}</td>
                                            <td>{{ obj.age }}</td>
                                            <td>{{ obj.score }}</td>
                                            <td>{{ obj.code }}</td>
                                            <td>{{ obj.xueyuanname }}</td>
                                            <td>
                                                <button v-if="user.level===1" class="btn btn-primary btn-sm" @click="init(obj)">编辑</button>
                                                <button v-if="user.level===1" @click="del(obj.id)" class="btn btn-danger btn-sm">删除</button>
                                            </td>

                                        </tr>
                                        </tbody>
                                    </table>
                                    <nav aria-label="Page navigation example">
                                        <ul class="pagination">
                                            <li class="page-item" v-bind:class="{ disabled : preActive }">
                                                <a class="page-link" href="javascript:void(0)"
                                                   v-on:click="loadTable(pageInfo.hasPreviousPage? (pageInfo.pageNum - 1) : pageInfo.pageNum)">上一页</a>
                                            </li>
                                            <li class="page-item">
                                                <a class="page-link" href="javascript:void(0)" v-if="pageInfo.pageNum > 1 "
                                                   v-on:click="loadTable(pageInfo.pageNum - 1)"> {{pageInfo.pageNum - 1}}</a>
                                            </li>
                                            <li class="page-item disabled">
                                                <a class="page-link" aria-disabled="true" href="javascript:void(0)" > {{pageInfo.pageNum}}</a>
                                            </li>
                                            <li class="page-item">
                                                <a class="page-link" href="javascript:void(0)" v-if="pageInfo.hasNextPage "
                                                   v-on:click="loadTable(pageInfo.pageNum + 1)" > {{pageInfo.pageNum + 1}}</a>
                                            </li>
                                            <li class="page-item" v-bind:class="{disabled: nextActive}">
                                                <a class="page-link" href="javascript:void(0)"
                                                   v-on:click="loadTable(pageInfo.hasNextpage? (pageInfo.pageNum + 1): pageInfo.pageNum)">下一页</a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal" tabindex="-1" role="dialog" id="mod">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title">请填写信息</span>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="entity={}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <input type="hidden" id="id" name="id" v-model="entity.id">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">姓名</label>
                            <div class="col-sm-7 form-inline">
                                <input type="text" class="form-control" v-model="entity.name" placeholder="请输入姓名" style="width:100%">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">姓别</label>
                            <div class="col-sm-7 form-inline">
                                <label class="radio-inline">
                                    <input type="radio" value="男" v-model="entity.sex" >男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" value="女" v-model="entity.sex" >女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">年龄</label>
                            <div class="col-sm-7 form-inline">
                                <input type="text" class="form-control" v-model="entity.age" placeholder="请输入年龄" style="width:100%">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">学分</label>
                            <div class="col-sm-7 form-inline">
                                <input type="text" class="form-control" v-model="entity.score" placeholder="请输入该学生学分" style="width:100%">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">学号</label>
                            <div class="col-sm-7 form-inline">
                                <input type="text" class="form-control" v-model="entity.code" placeholder="请输入学生学号" style="width:100%">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">所属学院</label>
                            <div class="col-sm-7 form-inline">
                         <select class="form-control" v-model="entity.xueyuanid"  style="width:100%">
                             <option v-for="item in xueyuanObjs" :value="item.id">{{item.name}}</option>
                         </select>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="entity={}">关闭</button>
                    <button type="button" class="btn btn-primary" @click="submit()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.metisMenu.js"></script>
<script src="../js/custom-scripts.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/element/index.js"></script>

<script>
    function msg(type, msg) {
        Vue.prototype.$message({
            type: type, // success（成功）、warning（警告）, error(错误)
            message: msg,
            duration: 2000,
            offset: 100,
            center: true
        })
    }

    new Vue({
        el: '#wrapper',
        data: {
            user: {},
            entity: {},
            tableData: [],
            pageInfo: {},
            preActive: false,
            nextActive: false,
            search: null,
            xueyuanObjs: [],
        },
        created: function () {
            const menuHeight = document.getElementById("main-menu").getElementsByTagName('li').length * 53;
            const bodyHeight = document.getElementsByTagName("body")[0].clientHeight;
            document.getElementById("nav-id").style.height = (menuHeight > bodyHeight ? menuHeight : bodyHeight) + 'px';
            this.user = JSON.parse(localStorage.getItem('user'));
            this.loadTable(1);
            this.loadxueyuan();

        },
        methods: {

            loadxueyuan(){
                axios.get("/xueyuanInfo").then(res => {
                    if (res.data.code === '0'){
                        this.xueyuanObjs = res.data.data;

                    }else {
                        msg("error",res.data.msg);
                    }
                })
            },

            loadTable(pageNum){
                //    this.search ? this.search : ;
                if (this.search){
                    axios.get("/studentInfo/page/" + this.search+ "?pageNum="+pageNum +"&pageSize=5").then(res => {
                        if (res.data.code === '0'){

                            this.tableData = res.data.data.list;
                            this.pageInfo = res.data.data;
                            this.preActive = !(this.pageInfo.hasPreviousPage);
                            this.nextActive = !(this.pageInfo.hasNexthasPage);
                        }
                        else {
                            msg("error",res.data.msg);
                        }
                    })
                }else {
                    axios.get("/studentInfo/page?pageNum="+pageNum +"&pageSize=5").then(res => {
                        if (res.data.code === '0'){

                            this.tableData = res.data.data.list;
                            this.pageInfo = res.data.data;
                            this.preActive = !(this.pageInfo.hasPreviousPage);
                            this.nextActive = !(this.pageInfo.hasNexthasPage);
                        }
                        else {
                            msg("error",res.data.msg);
                        }
                    })

                }
            },

            del(id){
                let  this_ = this;
                this.$confirm('确认删除？' ,'系统提示' ,{
                    confirmOuttonText: '确认',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'btn-custom-cancel',
                    type :'marning'
                }).then(function (){

                    axios.delete("/studentInfo/" + id).then(res =>{
                        if (res.data.code === '0'){
                            msg("success","删除成功");
                            this_.loadTable(pageNum);
                        }else {
                            msg("error",res.data.msg);
                        }
                    })
                }).catch(function (){
                    console.log("取消成功!");
                });

            },
            init(obj){
                this.entity = JSON.parse(JSON.stringify(obj));
                $('#mod').modal("show");
            },

            add(){
                this.entity = {};
                $('#mod').modal("show");

            },
            submit(){
                if(this.entity.id){
                    //先对id进行查询 如果id存在则这是一个更改操作
                    axios.put("/studentInfo",this.entity).then(res => {
                        if (res.data.code === '0'){
                            $('#mod').modal("hide");
                            msg("success","修改成功");
                            this.loadTable(pageNum);
                        }else {
                            msg("error",res.data.msg);
                        }
                    })
                }else {
                    //如果id不存在那就说明这是一个新增的操作
                    axios.post("/studentInfo",this.entity).then(res =>{
                        if (res.data.code === '0'){

                            $('#mod').modal("hide");
                            msg("success","增加成功");
                            this.loadTable(pageNum);

                        }else {
                            msg("error",res.data.msg);
                        }
                    })

                }
            }
            ,

            logout() {
                logout();
            }
        }
    })
</script>
</body>
</html>